<template>
    <div>
        <!--安排评审会:rzAppsh-->
        <div class="w_100 headTips d_f j_c_s_b" >
            <div class="d_f a_i_c">
                <div class="line"></div>
                {{ name }}
            </div>
            <div class="isClose" @click="close">
                <el-icon v-if="type == 'smallForm'">
                    <CloseBold />
                </el-icon>
            </div>
            <el-switch v-if="type == 'bigForm'" @change="change" v-model="status"
                style="--el-switch-on-color: #13ce66;" />
                <el-button type="primary" v-if="type == 'useForm'&&isReset==1" @click="clearForm">清除表单</el-button>
        </div>
        <div class="formBox rzAppsh">
            <div class="formArrow d_f a_i_c">
                <img src="../../assets/formArrow.png" alt="">
                <span>评审会详情</span>
            </div>

            <myform :fields="fields" ref="form1" :rules="rules" :model="model.deliberativeBaseData" :options="options"
                class="m_t_16">
            </myform>

            <div class="segment"></div>
            <div class="formArrow d_f a_i_c">
                <img src="../../assets/formArrow.png" alt="">
                <span>参会人员</span>
            </div>
            <div class="form2">
                <myform :fields="fields1" ref="form2" :rules="rules" :model="model.deliberativeBaseData"
                    :options="options" class="m_t_16">
                    <template v-slot:member>
                        <el-checkbox-group v-model="model.deliberativeBaseData.member1">
                            <el-checkbox :disabled="isAudit" v-for="(item, index) in options.compere" :key="index" :label="item.name"
                                :value="item.id" />
                        </el-checkbox-group>
                    </template>
                </myform>
            </div>
            <div class="segment" v-if="fields2.length > 0"></div>
            <div class="formArrow d_f a_i_c m_t_30" v-if="fields2.length > 0">
                <img src="../../assets/formArrow.png" alt="">
                <span>{{ subTitle || '新加字段' }}</span>
            </div>
            <div v-if="fields2.length > 0">
                <myform :fields="fields2" :model="model.deliberativeBaseData" :options="options" class="m_t_16">
                </myform>
            </div>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue'
import { rzAppshType } from './data'
import { CloseBold } from '@element-plus/icons-vue'
import { copy } from '../../utils/date'
import { useRouter } from 'vue-router'
import { formGet, unitFormSet, emplLstAll, empDeliberative } from '../../api/system/flowPath'
import { Message } from '../../utils/resetMessage'
import { listByParentArr } from '../../api/login'
const model = {
    deliberativeBaseData: {
        subject: '',//审议会主题
        meetingTime: '',//会议时间
        meetingAddress: '',//会议地点
        compere: '',//主持人
        recorder: '',//记录人
        remark: '',//会议备注
        member: [],//参会人员
        member1: [],//参会人员
        timeoutExplain: '',//超时说明
        isReview: 1
    },
}
export default defineComponent({
    name: '',
    props: {
        type: {
            type: String,
            default: '',
        },
        unitId: {
            type: [String, Number],
            default: '',
        },
        isEnabled: {
            type: Number,
            default: '',
        },
        nodeObj: {
            type: Object,
            default: {}
        },
        vars: {
            type: Object,
            default: {}
        },
        isAudit: {
            type: Boolean,
            default: false
        }
    },
    components: {
        CloseBold
    },
    setup(props: any) {
        const data: rzAppshType = reactive({
            name: '安排评审会',
            status: true,
            model: copy(model),
            subTitle: '',
            fields: [
                {
                    label: "会议主题",
                    prop: 'subject',
                    placeholder: '请输入会议主题',
                    type: 'input',
                    labelWidth: '150px',
                    disabled:false,
                },
                {
                    label: "会议时间",
                    prop: 'meetingTime',
                    placeholder: '请选择会议时间',
                    type: 'date',
                    labelWidth: '150px',
                    disabled:false,
                },
                {
                    label: "会议地点",
                    prop: 'meetingAddress',
                    placeholder: '请输入会议地点',
                    type: 'input',
                    labelWidth: '150px',
                    disabled:false,
                },
                {
                    label: "主持人",
                    prop: 'compere',
                    placeholder: '请选择主持人',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                    labelWidth: '150px',
                    disabled:false,
                },
                {
                    label: "记录人",
                    prop: 'recorder',
                    placeholder: '请选择记录人',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                    labelWidth: '150px',
                    disabled:false,
                },
                {
                    label: "备注",
                    prop: 'remark',
                    placeholder: '请输入备注',
                    type: 'textarea',
                    labelWidth: '150px',
                    disabled:false,
                },
            ],
            fields1: [
                {
                    label: "人员选择（多选）",
                    prop: 'member',
                    labelWidth: '150px',
                    disabled:false,
                },
                // {
                //     label: "超时说明",
                //     prop: 'timeoutExplain',
                //     placeholder: '请输入超时说明',
                //     type: 'textarea',
                //     labelWidth: '150px',
                //     disabled:false,
                // },
            ],
            fields2: [],
            rules: {
                subject: [
                    { required: true, message: '请输入会议主题', trigger: 'blur' },
                ],
                meetingTime: [
                    { required: true, message: '请选择会议时间', trigger: 'change' },
                ],
                // meetingAddress: [
                //     { required: true, message: '请输入会议地点', trigger: 'blur' },
                // ],
                compere: [
                    { required: true, message: '请选择主持人', trigger: 'change' },
                ],
                recorder: [
                    { required: true, message: '请选择记录人', trigger: 'change' },
                ],
                // timeoutExplain: [
                //     { required: true, message: '请输入超时说明', trigger: 'blur' },
                // ],
            },
            options: {
                compere: [],
                recorder: [],
                member: [],
            },
            id: '',
            isReset:2,
        })
        const router = useRouter()
        const form1 = ref()
        const form2 = ref()
        onBeforeMount(() => {
            methods.getData()
            data.status = props.isEnabled == 0 ? false : true
        })
        const methods = {
            getData() {
                formGet({ tag: 'rzAppsh' }).then((res: any) => {
                    data.id = res.id
                    data.name = res.name
                    data.isReset=res.isReset
                    if (!res.formStruct || res.formStruct == 'null' || res.formStruct == '{}') return
                    data.subTitle = res.subTitle
                    let formStruct = JSON.parse(res.formStruct)
                    formStruct.formFields.map((item:any)=>{
                        data.model.deliberativeBaseData[item.prop]=''
                    })
                    data.fields2 = formStruct.formFields
                    data.fields.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    data.fields1.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    data.fields2.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    if (props.vars) {
                        const localData = props.vars
                        for (let key in data.model.deliberativeBaseData) {
                           if(localData.deliberativeBaseData[key]!=null){
                            data.model.deliberativeBaseData[key] = localData.deliberativeBaseData[key]
                           }
                        }
                        data.model.deliberativeBaseData.member=[]
                       if(localData.deliberativeBaseData.member){
                        data.model.deliberativeBaseData.member1= localData.deliberativeBaseData.member.map((item:any)=>{
                            return item.empId
                        })
                       }
                    } 
                    let arr = formStruct.formFields.filter((item: any) => {
                        return item.type == 'select'
                    })
                    let ids = arr.map((item: any) => {
                        return item.prop
                    })
                    if (ids.length == 0) return
                    listByParentArr({ ids: ids }).then((res: any) => {
                        ids.map((item: any) => {
                            data.options[item] = res[item]
                        })
                    })
                })
                emplLstAll({}).then((res: any) => {
                    data.options.compere = data.options.recorder = res
                })
                // empDeliberative({}).then((res: any) => {
                //     data.options.member = res
                // })
            },
            close() {
                router.push('/system/flowPath/childForm/index')
            },
            //设置表单的启用跟停用
            change() {
                unitFormSet({ isEnabled: data.status ? 1 : 0, id: data.id, unitId: props.unitId }).then(() => {
                    Message({ type: 'success', message: '设置成功' })
                }).catch(() => {
                    data.status = !data.status
                })
            },
            //清除表单数据
            clearForm() {
                data.model = copy(model)
},
            resultData() {
                return new Promise((resolve, reject) => {
                    form1.value.verification().then((res) => {
                        form2.value.verification().then((res) => {
                           let member=[]
                            data.options.compere.map((item: any) => {
                                if (data.model.deliberativeBaseData.member1.some((item1: any) => item1 == item.id)) {
                                    member.push({ empId: item.id, empName: item.name })
                                }
                            })
                            data.model.deliberativeBaseData.member=member
                            resolve(data.model)
                        }).catch(() => {
                            reject(false)
                        })
                    }).catch(() => {
                        reject(false)
                    })

                })
            },
            saveData() {
                return new Promise((resolve, reject) => {
                    data.options.compere.map((item: any) => {
                                if (data.model.deliberativeBaseData.member1.some((item1: any) => item1 == item.id)) {
                                    data.model.deliberativeBaseData.member.push({ empId: item.id, empName: item.name })
                                }
                            })
                    resolve(data.model)
                })
            },
        }
        return {
            ...toRefs(data),
            ...methods, form1, form2
        }
    }
})
</script>
<style lang='scss'>
.rzAppsh {
    .el-form-item {
        width: 50% !important;
        margin-right: 0px !important;

        .el-form-item__content {
            width: calc(100% - 150px) !important;

            .el-input,
            .el-cascader,
            .el-select {
                width: 100% !important;
            }
        }
    }

    .el-form-item:nth-child(6) {
        width: 100% !important;
    }
}

.form2 {
    .el-form-item {
        width: 100% !important;
    }
}
</style>